<template>
	<scroll-view>
		<view class="card-container" style="background-color: #f8f8f8">
		
			<view class="my-card">
				<view class="custom-font">泉州风光</view>
				<swiper class="card-swiper" circular :indicator-dots="indicatorDots" :autoplay="autoplay"
					:interval="interval" :duration="duration">
					<swiper-item>
						<image src="/static/city1.png" mode="aspectFill"></image>
					</swiper-item>
					<swiper-item>
						<image src="/static/city2.jpg" mode="aspectFill"></image>
					</swiper-item>
					<swiper-item>
						<image src="/static/city3.jpg" mode="aspectFill"></image>
					</swiper-item>
					<swiper-item>
						<image src="/static/city4.jpg" mode="aspectFill"></image>
					</swiper-item>
					<swiper-item>
						<image src="/static/city5.jpg" mode="aspectFill"></image>
					</swiper-item>
				</swiper>
			</view>
		
			<view class="my-card">
				<view class="custom-font">泉州介绍</view>
				<view class="custom-font">海上丝绸之路起点——泉州</view>
				<view><rich-text :nodes="nodes"></rich-text></view>
				<view><rich-text :nodes="strings"></rich-text></view>
			</view>
		
			<view class="my-card">
				<view class="custom-font">探索进度</view>
				<view style="font-size: 14px; color: slategrey; margin-top: 20rpx;">当前进度：60%</view>
				<view style="margin: 15rpx 0;">
					<progress percent="60" show-info="true" active="true"></progress>
				</view>
			</view>
		
			<view class="my-card">
				<view class="custom-font">选择城市</view>
				<view style="background-color: lightgray; margin: 20rpx 0;">
					<picker @change="" mode="multiSelector" :value="multiIndex" :range="multiArray">
						<view>
							<text
								style="font-weight: bold;">当前选择：</text>{{multiArray[0][multiIndex[0]]}}-{{multiArray[1][multiIndex[1]]}}-{{multiArray[2][multiIndex[2]]}}
						</view>
					</picker>
				</view>
			</view>
		
			<view class="my-card">
				<view class="custom-font">泉州宣传</view>
				<view class="video-wrapper">
					<video id="qz_video" class="responsive-video" src="/static/city-video.mp4" page-gesture="true"
						show-mute-btn="true" controls></video>
				</view>
			</view>
		
			<view class="my-card">
				<view class="custom-font">泉州背景音乐</view>
				<view class="audio-player">
					<text>{{ audio.name }}</text>
					<image class="poster" :src="audio.poster" mode="aspectFit"></image>
					<view>
						<button @tap="togglePlay">{{ audio.playing ? '暂停' : '播放' }}</button>
						<slider :value="audio.currentTime" :max="audio.duration" @changing="onSeek" style="flex: 1;" />
						<text>{{ formatTime(audio.currentTime) }} / {{ formatTime(audio.duration) }}</text>
					</view>
				</view>
			</view>
		
			<view class="my-card" style="font-size: 14px;">
				<view class="custom-font">偏好设置</view>
				<view style="border-bottom: 1px solid #dbdbdb; margin: 5px;">
					<radio-group>
						<view>
							<text>出行方式：</text>
							<radio style="margin: 10px 5px;" value="公交">公交</radio>
							<radio style="margin: 10px 5px;" value="自驾">自驾</radio>
							<radio style="margin: 10px 5px;" value="步行">步行</radio>
						</view>
					</radio-group>
				</view>
				<view style="border-bottom: 1px solid #dbdbdb; margin: 5px;">
					<text>显示推荐景点</text>
					<view class="card-content-right">
						<switch style="transform:scale(0.8);"></switch>
					</view>
				</view>
				<view style="border-bottom: 1px solid #dbdbdb; margin: 5px;">
					<text>探索半径:{{lkm}}km</text>
					<view class="card-content-right">
						<slider @change="changlkm" style="width: 60%;" value="1" show-value="true" step="1" max="30"></slider>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>

<script>
	import {
		ref,
		reactive,
		onMounted,
		onUnmounted
	} from 'vue';
	export default {
		data() {
			return {
				indicatorDots: true,
				autoplay: true,
				interval: 5000,
				duration: 500,
				nodes: [{
						name: 'p',
						attrs: {
							class: 'title-text',
							style: 'font-weight: bold; font-size: 14px; display: inline;',
						},
						children: [{
							type: 'text',
							text: '历史文化：'
						}]
					},
					{
						name: 'p',
						attrs: {
							class: 'default-text',
							style: 'font-size: 14px; display: inline;',
						},
						children: [{
							type: 'text',
							text: '泉州是国务院首批公布的24个历史文化名 城之一，是古代”海上丝绸之路”起点，宋元时期被营 为”东方第一大港”。'
						}]
					},
					{
						name: 'br'
					},
					{
						name: 'p',
						attrs: {
							class: 'title-text',
							style: 'font-weight: bold; font-size: 14px; display: inline;',
						},
						children: [{
							type: 'text',
							text: '著名景点：'
						}]
					},
					{
						name: 'p',
						attrs: {
							class: 'default-text',
							style: 'font-size: 14px; display: inline;',
						},
						children: [{
							type: 'text',
							text: '清源山、开元寺、泉州清净寺、崇武古 城、洛阳桥等。'
						}]
					}
				],
				strings: '<div style="font-size: 14px"><p style="font-weight: bold; font-size: 14px; display: inline;">特色文化：</p><p style="font-size: 14px; display: inline;">拥有<p style="font-size: 14px; color:mediumblue; display: inline;">南音</p>、<p style="font-size: 14px; color:mediumblue; display: inline;">木偶戏</p>和<p style="font-size: 14px; color:mediumblue; display: inline;">闽南建筑</p>等丰富的非物质文化遗产。</p></div>',

				multiArray: [
					['福建', '浙江'],
					['泉州', '厦门'],
					['鲤城区', '晋江市', '南安市']
				],
				multiIndex: [0, 0, 0],
				audio: {
					name: '泉州南音',
					poster: '/static/music-poster.jpg',
					playing: false,
					currentTime: 0,
					duration: 0
				},
				// 音频上下文实例
				innerAudioContext: null,
				lkm: 1
			}
		},
		methods: {
			changlkm(e) {
				this.lkm=e.detail.value
			},
			// 初始化音频
			initAudio() {
				this.innerAudioContext = uni.createInnerAudioContext();
				this.innerAudioContext.src = '/static/city-music.mp3';

				// 监听音频可以播放事件
				this.innerAudioContext.onCanplay(() => {
					console.log('音频可以播放');
					this.audio.duration = this.innerAudioContext.duration;
				});

				// 监听时间更新
				this.innerAudioContext.onTimeUpdate(() => {
					this.audio.currentTime = this.innerAudioContext.currentTime;
				});

				// 监听播放结束
				this.innerAudioContext.onEnded(() => {
					this.audio.playing = false;
					this.audio.currentTime = 0;
				});

				// 监听错误
				this.innerAudioContext.onError((err) => {
					console.error('音频播放错误:', err);
					uni.showToast({
						title: '播放失败',
						icon: 'none'
					});
				});
			},

			// 播放/暂停切换
			togglePlay() {
				if (this.audio.playing) {
					this.innerAudioContext.pause();
					this.audio.playing = false;
				} else {
					this.innerAudioContext.play();
					this.audio.playing = true;
				}
			},

			// 进度条拖动
			onSeek(e) {
				const newTime = e.detail.value;
				this.innerAudioContext.seek(newTime);
				this.audio.currentTime = newTime;
			},

			// 时间格式化
			formatTime(seconds) {
				if (!seconds) return '00:00';
				const min = Math.floor(seconds / 60);
				const sec = Math.floor(seconds % 60);
				return `${min.toString().padStart(2, '0')}:${sec.toString().padStart(2, '0')}`;
			},

			radioChange: function(evt) {
				for (let i = 0; i < this.items.length; i++) {
					if (this.items[i].value === evt.detail.value) {
						this.current = i;
						break;
					}
				}
			}
		},
		mounted() {
			this.initAudio();
		},
		beforeUnmount() {
			// 组件卸载时销毁音频实例
			if (this.innerAudioContext) {
				this.innerAudioContext.destroy();
			}

		}
	}
</script>

<style>
	.my-card {
		margin: 10px;
		border: 1px solid #ccc;
		/* 设置边框，您可以根据需要更改颜色 */
		border-radius: 8px;
		/* 设置圆角，值越大角越圆 */
		box-shadow: none;
		/* 明确确保无阴影 */
		width: 100%;
		/* 无需设置height，高度将由内容自动撑开 */
		padding: 10px;
		/* 建议添加内边距，使内容不与边框紧贴 */
		background-color: #fff;
		/* 设置一个背景色，通常为白色 */
		overflow: hidden;
		/* 卡片溢出隐藏 */
	}

	.card-container {
		display: flex;
		flex-wrap: wrap;
		/* 允许卡片在空间不足时自动换行 */
		gap: 5rpx;
		/* 设置卡片之间的间距 */
		justify-content: flex-start;
		/* 卡片沿主轴起始线对齐 */
	}

	.custom-font {
		font-family: 黑体, "SimHei", sans-serif;
		/* 设置字体系列，优先使用黑体 */
		font-weight: bold;
		/* 或者使用 font-weight: 700; */
		font-size: 20px;
		/* 设置字体大小为20像素 */
	}

	/* Swiper容器样式 - 关键设置 */
	.card-swiper {
		width: 100%;
		min-height: 350rpx;
		/* 根据您的需求调整高度 */
		border-radius: 12px;
		/* 设置轮播区域圆角 */
		overflow: hidden;
		/* 确保图片也遵循圆角 */
	}

	/* 图片样式 - 实现居中显示和圆角 */
	.card-swiper image {
		width: 100%;
		height: 100%;
		object-fit: cover;
		/* 关键属性：保持图片比例并充满容器 */
		border-radius: 10px;
		/* 图片本身的圆角，可略小于容器圆角 */
		display: block;
	}

	.video-wrapper {
		position: relative;
		width: 100%;
		padding-bottom: 56.25%;
		/* 16:9 比例的关键计算 (9/16=0.5625) */
		border-radius: 8px;
		/* 视频容器圆角 */
		overflow: hidden;
		/* 确保视频内容不溢出圆角 */
		background-color: #000;
		/* 视频加载前的背景色 */
		margin: 15px 0;
	}

	.responsive-video {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		border-radius: 8px;
		/* 视频本身圆角 */
		object-fit: cover;
		/* 或使用 contain，根据需求选择 */
	}

	.audio-player {
		display: flex;
		flex-direction: column;
		align-items: center;
		padding: 20rpx;
	}

	.poster {
		width: 200rpx;
		height: 200rpx;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
	}

	.card-content-right {
		display: flex;
		flex-direction: column;
		align-items: flex-end;
		text-align: right;
	}
</style>